<template>
  <div style="display: flex; height: 42px; align-items: center">
    <div style="font-weight: bold; font-size: 16px; padding-right: 15px">断言配置</div>
    <el-switch active-text="启用" inactive-text="禁用" inline-prompt></el-switch>
  </div>
  <el-alert type="primary" :closable="false">
    <div class="assert-toolbar">
      <div>
        根据指令执行输出内容进行断言， 如果断言失败，
        <el-select style="width: 80px" v-model="assertConfig.failContinueExec">
          <el-option label="继续" :value="true"></el-option>
          <el-option label="不再" :value="false"></el-option>
        </el-select>
        执行后续指令。 当前设置断言类型为：
        <el-select style="width: 100px" v-model="assertConfig.assertType" :show-arrow="false" :clearable="true" :offset="2" placeholder="请选择断言类型">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div style="width: 80px"></div>
      <el-button type="primary" :disabled="assertConfig.assertType !== 1 && assertConfig.assertType !== 0" @click="addAssertConfig"> 添加 </el-button>
    </div>
  </el-alert>
  <div>
    <el-empty v-if="assertConfig.assertRuleList.length === 0" :image-size="80" description="暂无断言配置" />
    <div v-else :class="assertConfig.assertType === 0 ? 'assert-config-box fail-assert' : 'assert-config-box success-assert'">
      <div class="title">{{ assertConfig.assertType === 0 ? '失败断言' : '成功断言' }}</div>
      <div style="max-height: 300px; position: relative; overflow-y: auto; overflow-x: hidden">
        <el-row v-for="(item, index) in assertConfig.assertRuleList" :key="index">
          <el-col :span="2">
            <el-form-item style="margin: 3px">
              <label style="font-weight: bold; font-size: 15px" v-if="index === 0">返回结果</label>
              <el-select v-else>
                <el-option label="并且" :value="1" />
                <el-option label="或者" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item style="margin: 3px">
              <el-select v-model="item.conditionOperator">
                <el-option label="包含" :value="1" />
                <el-option label="不包含" :value="2" />
                <el-option label="以...开始" :value="3" />
                <el-option label="以...结束" :value="4" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item style="margin: 3px">
              <el-input v-model="item.value" placeholder="期望值" style="width: calc(100% - 36px); padding-right: 10px"></el-input>
              <el-icon class="del"><Delete /></el-icon>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
  <div style="width: 100%; display: flex; justify-content: end">
    <el-button @click="close">关闭</el-button>
    <el-button type="primary">确认</el-button>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import type { IAssertConfig } from '../shell-script';
import { ConditionOperator } from '@/utils/enum/enum';

const assertConfig = ref<IAssertConfig>({
  failContinueExec: false,
  assertType: 0, //断言类型（0 断言失败| 1断言成功）
  assertRuleList: [], //断言规则列表
});

const options = [
  {
    value: 1,
    label: '成功断言',
  },
  {
    value: 0,
    label: '失败断言',
  },
];
const addAssertConfig = () => {
  assertConfig.value.assertType = 1;
  assertConfig.value.assertRuleList.push({
    conditionOperator: ConditionOperator.INCLUDE, //条件运算符
    value: '',
  });
};

const modelValue = defineModel<string | undefined>();
if (modelValue.value) {
  assertConfig.value = JSON.parse(modelValue.value) as unknown as IAssertConfig;
}

const emits = defineEmits(['close', 'ok']);

const close = () => {
  emits('close');
};
const ok = () => {
  emits('ok');
};

watch(
  assertConfig.value,
  () => {
    const value = JSON.stringify(assertConfig.value);
    modelValue.value = value;
  },
  { deep: true },
);
</script>
<style lang="scss" scoped>
.assert-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.assert-config-box {
  margin: 5px;
  padding: 0 5px 10px 5px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background-color: #f0f7ff;
  box-shadow: 1px 0 10px rgba(0, 0, 0, 0.14);
  background-color: #fff;
  .title {
    width: 100%;
    text-align: left;
    height: 36px;
    line-height: 36px;
    font-weight: bold;
    font-size: 15px;
    border-bottom: 1px dashed #c0cecc;
    margin-bottom: 5px;
  }
}
.success-assert {
  margin: 10px;
  border-left: 2px solid #4da5ff;
  .title {
    color: #4da5ff;
  }
}
.fail-assert {
  margin: 10px;
  border-left: 2px solid red;
  .title {
    color: red;
  }
}
</style>
